<template>
  <el-dialog v-model="dialogVisible" title="查看详情">
    <el-form
      ref="ruleFormRef"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      :label-width="90"
    >
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="formInline.sex" placeholder="请选择性别" size="large">
          <el-option
            v-for="item in sexOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="formInline.age" placeholder="请输入年龄" clearable />
      </el-form-item>
      <el-form-item label="出生年月">
        <el-date-picker
          v-model="formInline.birth"
          type="date"
          placeholder="请输入出生年月"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="婚姻状况">
        <el-select v-model="formInline.marriage" placeholder="请选择婚姻状况">
          <el-option
            v-for="item in marriageOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="民族">
        <el-input v-model="formInline.nationStr" placeholder="请输入民族" clearable />
      </el-form-item>
      <el-form-item label="身份证号码">
        <el-input v-model="formInline.userId" placeholder="请输入身份证号码" clearable />
      </el-form-item>
      <el-form-item label="邮箱地址">
        <el-input v-model="formInline.email" placeholder="请输入邮箱地址" clearable />
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="formInline.phoneNumber" placeholder="请输入联系方式" clearable />
      </el-form-item>
      <el-form-item label="部门">
        <el-cascader
          ref="cascaderRef"
          :show-all-levels="false"
          v-model="formInline.depId"
          :options="caserData"
          :placeholder="'请选择部门'"
          :props="cascaderProps"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="岗位">
        <el-select v-model="formInline.partId" placeholder="请选择岗位">
          <el-option
            v-for="item in partOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { computed, ref, onMounted } from 'vue';
import { getStaffDetailReq, updateStaffReq, getPostByDepId } from '@/api/staffManage';
import { getDepList, getPositionById } from '@/api/depManage';
import { _msgBox } from '@/utils/msg';

const emit = defineEmits(['update:updateShow', 'reject', 'joinOffer', 'updated']);
const prop = defineProps({
  showBtns: {
    type: Boolean,
    default: true,
  },
  curRow: {
    type: Object,
    default: () => {},
  },
  updateShow: {
    type: Boolean,
    default: false,
  },
});
const ruleFormRef = ref(null);
const dialogVisible = computed({
  get() {
    return prop.updateShow;
  },
  set(v) {
    emit('update:updateShow', v);
  },
});
const cascaderProps = {
  emitPath: false,
  checkStrictly: true,
};
const marriageOptions = [
  {
    label: '未婚',
    value: '1',
  },
  {
    label: '已婚',
    value: '2',
  },
  {
    label: '离异',
    value: '3',
  },
  {
    label: '丧偶',
    value: '4',
  },
  {
    label: '分居',
    value: '5',
  },
  {
    label: '再婚',
    value: '6',
  },
];

const sexOptions = [
  {
    label: '男',
    value: '1',
  },
  {
    label: '女',
    value: '2',
  },
  {
    label: '未知',
    value: '3',
  },
];

const formInline = ref({
  name: '',
  sex: '',
  age: '',
  birth: '',
  marriage: '',
  nation: '',
  userId: '',
  phoneNumber: '',
  depId: '',
  partId: '',
  email: '',
});

const getStaffDetail = async () => {
  console.log('对象', prop.curRow);
  let par = {
    empId: prop.curRow.employeeId,
  };
  const res = await getStaffDetailReq(par);
  console.log('resres', res);
  if (res && res.code == 200) {
    formInline.value = res.data;
  }
};

const caserData = ref([]);
const getDeps = async () => {
  const res = await getDepList();
  if (res && res.code == 200) {
    caserData.value = res.data;
  }
};

const partOptions = ref([]);
const getPartbyId = async () => {
  let par = {
    departmentId: formInline.value.depId,
    currentPage: 1,
    pageSize: -1,
  };
  const res = await getPositionById(par);
  if (res && res.code == 200) {
    partOptions.value = res.data.list.map((item) => {
      return {
        label: item.positionName,
        value: item.positionId,
      };
    });
  }
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    console.log(formInline.value);
    if (valid) {
      let par = {
        id: prop.curRow.employeeId,
        ...formInline.value,
      };
      const res = await updateStaffReq(par);
      if (res && res.code == 200) {
        _msgBox('修改成功!', 'success');
        dialogVisible.value = false;
        emit('updated');
      }
    } else {
      console.log('error submit!');
      return false;
    }
  });
};
const fetchData = (url, body) => {
  const p = new Promise((resovle, reject) => {
    fetch(url, {
      method: 'POST',
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        resovle(data);
      })
      .catch((err) => {
        throw new Error(err);
      });
  });
  return p;
};
const cascaderRef = ref(null);
const handleChange = async (v) => {
  const node = cascaderRef.value.getCheckedNodes(false);
  formInline.value.depId = node[0].data.value;
  // partDisabled = false
  let body = {
    departmentId: formInline.value.depId,
    currentPage: 1,
    pageSize: -1,
  };
  const res = await getPostByDepId(body);
  partOptions.value = res.data.list.map((item) => {
    return {
      label: item.positionName,
      value: item.positionId,
    };
  });
};

onMounted(async () => {
  await getStaffDetail();
  getDeps();
  getPartbyId();
});
</script>

<style scoped lang="less"></style>
